<style>
  :root {
    --root-count: 888;
    --root-count-text: "这是888"
  }

  .box:after {
    content: "我是一个使用:after的content*属性生产的静态文字";
  }

  @media (max-device-width:800px) {
    .box:after {
      content: "max-device-width";
    }
  }

  @media (min-device-width:1200px) {
    div[data-line]:after {
      content: "[line " attr(data-customize) "]";


      /* 也就是虽然 content 属性本身不支持数值，但是 counter-reset 属性后面的计数器初始值是支持的 */
      counter-reset: progress var(--root-count);
      content: counter(progress);

      /* content: var(--root-count-text); */
      /* content: "[line " attr(data-line) "]"; */
    }
  }
</style>

<div class="box" data-line="kenguba" data-customize="一缕清风" onclick="clickMethod(this)"></div>

<script>
  var clickMethod = function (e) {
    console.log(e, e.getAttributeNames(), document.querySelector(".box").getAttributeNames());
  }
</script>